<template>
    <div class="issued-rules-history">
        <search-table
            :columns="columns"
            :data="issuedRuleList"
            @change-page="changePageNow"
            @change-size="changePageSize"
            :total="total"
            :page="pageIndex"
            :size.sync="pageSize">
            <template slot="select-group">
                <Select filterable
                    v-model="deviceId"
                    placeholder="请选择路由"
                    filterable
                    clearable
                    @on-change="changePageNow(1)">
                    <Option  v-for="item in routeList" :value="item.id"  :key="item.id" :title="item.name">{{item.name}}</Option>
                </Select>
            </template>
        </search-table>
    </div>
</template>

<script>
    import SearchTable from '@/components/SearchTable/SearchTable'
    import { getIssuedRulesRecord, getAllVm } from '@/api/drill'
    import { decode } from '@/libs/utils'

    export default {
        name: 'issued-rules-history',
        components: {
            SearchTable
        },
        props: {
            disabledAllBtn: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                total: 0, // 总数据量
                pageSize: 10, // 分页大小
                pageIndex: 1, // 当前页
                deviceId: '', // 搜索条件，指定路由
                columns: [
                    {
                        placement: 'top-left',
                        title: '路由名称',
                        key: 'deviceName',
                        align: 'center',
                        tooltip: true,
                        width: 230
                    },
                    {
                        placement: 'top-right',
                        title: '下发状态',
                        width: 70,
                        key: 'status',
                        render:(h,params) => {
                            let status = params.row.status
                            return h('Tag', {
                                props:{
                                    color: status === 'success' ? 'blue' : status === 'running' ? 'orange' : 'red'
                                }, 
                            }, status === 'success' ? '成功' : status === 'running' ? '运行中' : '失败')
                        }
                    },
                    {
                        title: '下发时间',
                        width: 140,
                        key: 'created'
                    },
                    {
                        title: '脚本内容',
                        width: 120,
                        key: 'content',
                        render:(h,params) => {
                            return h('Tooltip', {
                                props: {
                                    placement: 'top-start',
                                    transfer: true,
                                    'max-width': 600,
                                    content: decode(params.row.content)
                                }
                            }, [
                                h('span',{
                                    style: {
                                        width: '500px',
                                        'white-space': 'nowrap',
                                        overflow: 'hidden',
                                        'text-overflow': 'ellipsis'
                                    },
                                }, decode(params.row.content))
                            ])
                        }
                    }
                ],
                routeList: [], // 路由列表
                issuedRuleList: [] // 下发规则记录
            }
        },
        mounted() {
            this.init()
        },
        computed: {
            routeDict() {
                let ret = {}
                this.routeList.forEach(item => {
                    ret[item.id] = item.name
                })
                return ret
            }
        },
        methods: {
            // 查询路由列表，级联查询路由下发记录
            init() {
                getAllVm({
                    page: 1,
                    pageSize: 2147483647,
                    projectId: this.$route.query.prjid,
                    vmType: 'PRT'
                }).then(({ code, message, data }) => {
                    if (code !== 1) {
                        this.$Message.warning(message)
                    } else {
                        this.routeList = data.items || []
                        this.getIssuedRuleList()
                    }
                }).catch(() => {
                    this.$Message.error('获取路由列表异常')
                })
            },
            // 修改分页大小
            changePageSize(val) {
                this.pageSize = val
                this.getIssuedRuleList()
            },
            // 修改当前页
            changePageNow(val) {
                this.pageIndex = val
                this.getIssuedRuleList()
            },
            // 获取路由规则下发记录
            getIssuedRuleList() {
                clearTimeout(this.listTimer)
                getIssuedRulesRecord({
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                    projectId: this.$route.query.prjid,
                    deviceId: this.deviceId
                }).then(({ code, message, data }) => {
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    this.total = data.total || 0
                    let list = data.items || []
                    this.issuedRuleList = list.map(item => {
                        item.deviceName = this.routeDict[item.deviceId]
                        return item
                    })
                }).catch(() => {
                    this.$Message.error('获取路由规则下发记录异常')
                }).finally(() => {
                    this.listTimer = setTimeout(() => {
                        this.getIssuedRuleList()
                    }, 10000)
                })
            }
        },
        watch: {
        },
        beforeDestroy(){
            clearTimeout(this.listTimer)
        }
    }
</script>

<style scoped>
</style>